<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>08_条件渲染</title>
	</head>
	<body>
		<!--
		1. 条件渲染指令
		  v-if
		  v-else
		  v-show
		2. 比较v-if与v-show
		  如果需要频繁切换 v-show 较好
		-->

		<div id="demo">
			<p v-if="ok">表白成功</p>
			<p v-else>表白失败</p>

			<hr>
			<p v-show="ok">求婚成功</p>
			<p v-show="!ok">求婚失败</p>
			<!-- v-show 时 false display:none; -->

			<button @click="ok=!ok">切换</button>
		</div>

		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#demo',
				data: {
					ok: true,
				}
			})
		</script>
	</body>
</html>
